<template>
	<view class="order">
		   <u-sticky bgColor="#fff">
			 <u-tabs :scrollable="false" class="order-tab-1" :list="list1" @click="click"></u-tabs>
		   </u-sticky>
		 <view class="order-main">
		 	<Order :all='all'  v-for="(itme, index) in order" :key="key" :order_data="itme" class="order-radio"></Order>
		 </view>
	</view>
</template>

<script setup>  
import { reactive, ref,onMounted } from 'vue';  
import Order from "./order-menu.vue"
// 创建响应式数据  
const list1 = reactive([  
    { name: '全部' },  
    { name: '待支付' },  
    { name: '进行中' },  
    { name: '已完成' },  
]);  
const all = ref(true)
  
// 定义方法  

const order_data = ref([
{
	'time': '2022-12-13 10:45 | 滑板车',
	'money': '1.4元',
	'usetime': '骑行9分57秒',
	'stauts': 1
},
{
	'time': '2022-12-13 10:45 | 滑板车',
	'money': '1.4元',
	'usetime': '骑行9分57秒',
	'stauts': 2
},
{
	'time': '2022-12-13 10:45 | 滑板车',
	'money': '1.4元',
	'usetime': '骑行9分57秒',
	'stauts': 3
}])
const order = ref([])
onMounted(()=>{
	click({
		'name': '全部`'
	})
})
function click(item) {  
    console.log('item', item.name);  
	order.value = []
	all.value = !true
	if (item.name == '待支付') {
		for(let i=0; i < order_data.value.length; i++){
			if (order_data.value[i].stauts == 2){
				order.value.push(order_data.value[i])
			}
			
		}
	}else if(item.name == '全部') {
		all.value = true
		for(let i=0; i < order_data.value.length; i++){
			console.log(order_data.value[i]);
			order.value.push(order_data.value[i])
		}
	}else if(item.name == '进行中') {
		all.value = true
		for(let i=0; i < order_data.value.length; i++){
			if (order_data.value[i].stauts == 1){
				order.value.push(order_data.value[i])
			}
		}
	}else if(item.name == '已完成') {
		all.value = true
		for(let i=0; i < order_data.value.length; i++){
			if (order_data.value[i].stauts == 3){
				order.value.push(order_data.value[i])
			}
		}
	}
	
}  
</script>

<style scoped>
 .order {
	 width: 100vw;
	 height: 100vh;
	 position: relative;
	 background-color: rgb(233,236,239);
 }
 .order-tab {
	 width: 100%;
 }
 .order-tab-1 {
	 width: 100%;
 }
 .order-radio {
	 border-radius: 8px;
 }
</style>
